<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}" >
    <link rel="stylesheet" th:href="@{css/index.css}">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#qh_navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="" class="navbar-brand">淘淘在线商城</a>
        </div>

        <div id="qh_navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="">首页</a></li>
                <li><a href="">全部商品</a></li>
                <li><a href="">问题反馈</a></li>
                <li><a href="">学习路线</a></li>
                <li><a href="">资料下载</a></li>
            </ul>
            <div class="navbar-form navbar-left">
                <form>
                    <div class="input-group">
                        <input type="text" class="form-control" />
                        <span class="input-group-btn">
				  					<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
				  				</span>
                    </div>
                </form>
            </div>
            <ul class="nav navbar-nav navbar-right" style="margin-top: 10px;">
                当前用户:[[${session.nickname}]]
            </ul>

        </div>
    </div>
</nav>
<!--轮播图-->
<div class="carousel slide" id="myCarousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="https://yang3413.oss-cn-beijing.aliyuncs.com/2020/05/28/565ef3slide_01_2000x410.jpg" />
        </div>
        <div class="item">
            <img src="https://yang3413.oss-cn-beijing.aliyuncs.com/2020/05/28/de3152slide_02_2000x410.jpg"/>
        </div>
        <div class="item">
            <img src="https://yang3413.oss-cn-beijing.aliyuncs.com/2020/05/28/eaa359slide_03_2000x410.jpg "/>
        </div>

    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>
<!--登录模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">登录</h4>
            </div>
            <div class="modal-body">
                <form action="" method="">
                    <div class="form-group">
                        <label>账号:</label>
                        <input class="form-control" type="text" name="mobile" id="mobile" placeholder="账号/手机号" />
                    </div>
                    <div class="form-group">
                        <label>密码:</label>
                        <input class="form-control" type="password" name="password" id="password" placeholder="密码" />
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox" name="reme"/>记住密码</label>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="form-control btn btn-primary" value="登录" onclick="loginInfo()" />
                    </div>
                    <div class="form-group">
                        <p>
                            <a href="#">找回密码</a>
                        </p>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<!--注册模态框-->
<!-- Modal -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="ModalLabel">注册</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post">
                    <div class="form-group">
                        <label>手机号:</label>
                        <input class="form-control" type="text" name="shoujihao" placeholder="填写你的手机号" />
                    </div>
                    <div class="form-group">
                        <label>用户名:</label>
                        <input class="form-control" type="text" name="username" placeholder="英文,中文,最长12英文字母或9个汉字" />
                    </div>
                    <div class="form-group">
                        <label>密码:</label>
                        <input class="form-control" type="password" name="password" placeholder="密码" />
                    </div>
                    <div class="form-group">
                        <label>手机验证码:</label>
                        <div class="row">
                            <div class="col-xs-6">
                                <input class="form-control" type="text" name="yanma" placeholder="填写短信验证码" />
                            </div>
                            <div class="col-xs-6">
                                <input type="button" name="btn" class="form-control btn btn-default" value="点击获取验证码" />
                            </div>

                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 30px;margin-bottom: 30px;">
                        <input type="submit" class="form-control btn btn-primary" value="注册" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="courseList" class="container">
    <div class="page-header">
        <h3 class="text-center">图书信息列表</h3>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-3" th:each="book:${list}">
            <div class="thumbnail">
                <a href="#"> <img th:src="${book.avatar}" alt="course"></a>
                <div class="caption">
                    <h3><a th:href="@{/book/}+${book.id}">[[${book.bookname}]]</a></h3>
                    <h3 class="course_price">¥[[${book.price}]]</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer hidden-xs">
    <div class="footericon"><span class="iconfont icon-Windsurfing"></span></div>
    <p class="cr">Copyright © 2018 qihangzaixian. All Rights Reserved.</p>
    <p class="cr">淘淘在线商城 版权所有 | <a href="#">工具下载</a> | <a href="#">资料下载</a> | <a href="#">视频下载</a> | <a href="#">问题反馈</a> | <a href="#">帮助</a></p>
</div>

<script>
    //登录
   function loginInfo() {
        var mobile = $("#mobile").val().trim();
        var password = $("#password").val().trim();
        if (mobile==""||password==""){
            alert("请检查输入的账号或密码是否为空")
            return;
        }
        $.ajax({
            url:"login",
            type:"POST",
            data:{"mobile":mobile,"password":password},
            success:function(result) {
                if(result===""){

                    alert("登录失败");
                    location.reload();
                }else{
                    alert(result.R.message);
                    location.reload();
                }

            }
        })
   }
</script>

</body>
</html>